<template>
  <Echarts ref="echarts" :style="styleFilter(element.style)" :option="value" :id="id" />
</template>

<script>
import { mapState } from "vuex"
import mixin from "../mixin"

import Echarts from "../../../common/Echarts"


export default {
    mixins: [mixin],
    props: {
      value: {
        require: true,
        type: Object,
        default: () => {}
      },
      id: {
        require: true,
        type: String,
        default: ""
      }
    },
    computed: {
      // ...mapState["selectedComponent"]
    },
    methods: {
      styleFilter(style){
        return {
          // width: "100%",
          // height: "100%",
          // ...style,
          width: style.width + style.widthUnit,
          height: style.height + style.heightUnit,
          // fontSize: `${style.fontSize  }px`,
          // fontWeight: `${style.fontWeight  }`,
          // lineHeight: style.lineHeight + style.lineHeightUnit,
          // borderWidth: style.borderWidth + style.borderWidthUnit,
        }
      }
    },
    components: {
      Echarts
    },
    // watch: {
    //   value(){
    //     this.$refs.echarts.myChart.resize();
    //   }
    // },
    updated(){
      this.$refs.echarts.myChart.resize()
    }
}
</script>

<style lang="less" scoped>

</style>
